<template>
    <section class="content">
        <Carousel autoplay loop :autoplay-speed="3000">
            <CarouselItem>
                <div class="banner1">
                    <img src="../../assets/images/banner1.jpg" width="1980px">
                </div>
            </CarouselItem>
            <CarouselItem>
                <div class="banner2">
                    <img src="../../assets/images/banner2.jpg" width="1980px">
                </div>
            </CarouselItem>
        </Carousel>
        <div class="news">
            <figure>
                <div class="figure-flex">
                    <figcaption>{{ $t('langObj.newsCaption') }}</figcaption>
                    <ul>
                        <li v-for="item in newsLists" :key="item.id" :class="item.checked ? 'color-bg': ''" @mouseover="hover_over(item.imageUrl)" @click="toNews(item.url)">{{ item.name }}</li>
                    </ul>
                </div>
                <img :src="imgSrc" width="500px" height="350px">
            </figure>
            <div class="PS-block">
                <p>{{ $t('langObj.productCaption') }}</p>
            </div>
        </div>
        <home-images-block v-for="(item,index) in blockInfo" :key="index" :imageParmas="item" @seeMore="toDetail"></home-images-block>
        <div class="partner">
            <h2>{{ $t('langObj.partnersCaption') }}</h2>
        </div>
        <footer>
            <div class="contact-block">
                <ul>
                    <span>{{ $t('langObj.contactUs') }}</span>
                    <li>
                        <Icon size="20" type="ios-call-outline" />
                        0755-33855777
                    </li>
                    <li>
                        <Icon size="20" type="ios-print-outline" />
                        0755-33855778
                    </li>
                    <li>
                        <Icon size="20" type="ios-mail-outline" />
                        internet@foxconn.com
                    </li>
                    <li>
                        <Icon size="20" type="ios-pin-outline" />
                        {{ $t('langObj.address') }}
                    </li>
                </ul>
                <figure>
                    <figcaption style="text-align:center;margin-bottom:10px;font-size:14px">官方公众号</figcaption>
                    <img src="../../assets/images/weChat.png" width="130px" height="130px">
                </figure>
            </div>
            <div class="copyright-block">
                <span>{{ $t('langObj.privacyipFooter') }}</span>
                <span style="margin-left:50px">备案号：粤ICP备17133408号  Copyright © 2017 Foxconn Industrial Internet Co., Ltd. All rights reserved.</span>
            </div>
        </footer>
    </section>
</template>

<script>
import { mapActions } from 'vuex';
import { domain } from '../../utils/host';
import homeImagesBlock from '@/components/home/home-images-block';
export default {
    components:{homeImagesBlock},
    data(){
        return{
            newsLists:[],
            imgSrc:"",
            style:"",
            blockInfo:[
                {
                    imgSrc:require("@/assets/images/education.jpg"),
                    title:"Education Platform",
                    header:"教育平台",
                    desc:"搭建创新平台，发现工业大数据价值，促进工业大数据的基础研究和开发",
                    path:"/education"
                },
                {
                    imgSrc:require("@/assets/images/competition.jpg"),
                    title:"Competition",
                    header:"竞赛",
                    desc:"搭建创新平台，发现工业大数据价值，促进工业大数据的基础研究和开发",
                    path:"/competitions"
                },
                {
                    imgSrc:require("@/assets/images/dataset.jpg"),
                    title:"DataSet",
                    header:"数据集",
                    desc:"搭建创新平台，发现工业大数据价值，促进工业大数据的基础研究和开发",
                    path:"/datalab"
                },
                {
                    imgSrc:require("@/assets/images/lighthouse.jpg"),
                    title:"Lighthouse Factory Research",
                    header:"灯塔工厂研学",
                    desc:"搭建创新平台，发现工业大数据价值，促进工业大数据的基础研究和开发",
                    path:"/lighthouse"
                }
            ]
        }
    },
    methods: {
        ...mapActions(['XnewsList']),
        hover_over(imgSrc){
            this.newsLists.forEach(element => {
                if(element.imageUrl === imgSrc){
                    element.checked = true
                }else{
                    element.checked = false
                }
            })
            this.imgSrc = `${domain}/fdl/preImages/${imgSrc}`
        },
        toNews(url){
            window.open(url)
        },
        toDetail(path){
           this.$router.push({path:path})
        }
    },
    mounted() {
        this.XnewsList().then(res => {
            res.data.map(element => {
                element.checked = false
            });
            this.newsLists =res.data;
            this.imgSrc = `${domain}/fdl/preImages/${this.newsLists[0].imageUrl}`
        })
    },
}
</script>

<style lang="scss" scoped>
    // 新闻标题鼠标悬浮
    .color-bg{
        cursor: pointer;
        color:#C2142F !important;
        transition: color .5s ease
    }
    .content{
        flex:1;
        min-width: 1200px;
        
        .banner1,.banner2{
            min-width: 1200px;
            height:702px;
            overflow:hidden;
            position: relative;

            & > img{
                position: absolute;
                left:50%;
                transform: translateX(-50%);
                z-index:-1;
            }
        }

        .news{
            height: 765px;   

            & > figure{
                width: 1200px;
                margin: 0 auto;
                height:547px;
                padding: 50px;
                box-shadow:0px 4px 16px 0px rgba(25,63,110,0.3);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .figure-flex{
                & > figcaption{
                    font-size:32px;
                    font-weight:bold;
                    color:#C2142F;
                    margin-bottom: 10px;
                }

                & > span{
                    font-size:12px;
                    font-weight:500;
                    color:#C2142F;
                }

                & > ul{
                    margin-top: 40px;
                }

                li{
                    font-size:16px;
                    margin-bottom: 40px;
                    font-weight:600;
                    color:rgba(77,90,106,1);
                }
            }

            .PS-block{
                margin-top: 87px;
                text-align: center;

                & > p:first-of-type{
                    font-size:12px;
                    font-weight:500;
                    color:rgba(106,119,136,1);
                }
                & > p:last-of-type{
                    font-size:32px;
                    font-weight:bold;
                    margin-top:21px;
                    color:rgba(77,90,106,1);
                }
            }
        }

        .partner{
            height: 300px;
            text-align: center;
            background-image: url(../../assets/images/partner.png);
            background-repeat: no-repeat;
            background-size: 60% 120px;
            background-position: 50% 60%;

            & > p{
                margin:43px 0 20px;
                font-size:12px;
                font-weight:500;
                color:rgba(106,119,136,1);
            }

            & > h2{
                font-size:32px;
                font-weight: bold;
            }
        }

        & > footer{
            height: 288px;
            background:rgba(237,238,243,1);

            .contact-block{
                height: 248px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            li{
                margin:15px 0;
                list-style: none;
                font-size: 14px
            }

            .copyright-block{
                height: 40px;
                line-height: 40px;
                background:rgba(25,25,25,1);
                opacity:0.66;
                font-size:12px;
                font-weight:400;
                color:rgba(208,208,208,1);
                text-align: center;
            }
        }
    }
    
</style>
